<template>
  <div>
    <button @click="count--">
        点我不判奇偶:{{ count }}
    </button>
    <button @click="increment">
        点我判断奇偶:{{ count }}
    </button>

    <h3 v-if="countStyle">偶数</h3>
    <h3 v-else>奇数</h3>


    <form @submit.prevent="addTodo">
        <input v-model="newTodo">
        <button>Add todo</button>
    </form>
    <ul>
        <li v-for="todo in filteredTodos" :key="todo.id">
            <input type="checkbox" v-model="todo.done">
            <span :class="{ done: todo.done}">{{ todo.text }}</span>            
            <button @click="removeTodo(todo)">X</button>
        </li>
    </ul>
    <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? '展示所有' :'展示未选中' }}
    </button>

    <p ref="p"> 我可以在mounted里面进行修改 </p>
    
    <slot>这里可以显示父组件要标签中间的内容</slot>
  </div>

 
</template>

<script>

// 给每一个 todo对象一个唯一的id
let id = 0

export default {

    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
        return {
            count :0,
            countStyle: true,
            
            hideCompleted: false,
            newTodo:'',
            todos:[
                { id: id++, text: 'Learn HTML' , done: true},
                { id: id++, text: 'Learn JavaScript' , done: true },
                { id: id++, text: 'Learn Vue' , done: false }
            ]
        }
    },
    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件处理器绑定
    methods:{
        increment(){
            this.count++;
            this.countStyle = this.count%2 == 0;
            console.log('点击了按钮：count is ${this.count}');
        },

        addTodo(){
            this.todos.push({id : id++, text:this.newTodo});
            this.newTodo = '';
        },
        removeTodo(todo) {
            this.todos = this.todos.filter((t) => t != todo);
        }
    },
    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted(){
        this.$refs.p.textContent = "确实可以修改"
    },
    // 我们可以使用 computed 选项声明一个响应式的属性，它的值由其他属性计算而来
    // 计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。
    // 计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。
    computed:{
        filteredTodos(){
            return this.hideCompleted ? this.todos.filter((t) => !t.done) : this.todos
        }
    },

    // 这里可以监听一些值是否发生了变化
    watch:{

    },
    
    // 上个页面可以在标签里传值过来
    props:{
        msg: String
    },

    // 声明触发的事件
    emits:['response'],
    created(){
        // 带参数触发
        //this.$emit() 第一个参数是事件的名称。其他所有参数都将传递给事件监听器。
        this.$emit('response','hello from child')
        // 父类接收方式
        // <Normal @response="(msg)=> childMsg = msg">
        // <p>{{ childMsg }}</p>
    },

    name:"Normal"
}
</script>

<style>
button {
    font-weight: bold;
}
.done {
    text-decoration: line-through;
}

</style>